<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<meta http-equiv="Pragma" content="no-cache">
		<meta http-equiv="Cache-Control" content="no-cache">
		<meta http-equiv="Expires" content="0">
		<meta http-equiv="Pragma" content="no-cache">
		<meta http-equiv="Cache-Control" content="no-cache">
		
		<style>
			[v-cloak] {
				display: none;
			}
			div{
				display: flex;
				flex-direction: column;
				justify-content: space-around;
				align-items: center;
				width: 100%;
			}
			p{width: 50%;display: flex;
				justify-content: space-around;}
			img{
				width: 0.4rem;
				height: 0.4rem;
			}
		</style>
	</head>

	<body>

		<div class="center" id="app" v-cloak="">
			<p v-for="item,key in daJsonArr" v-if="item.num == 1">
				<img src="imgs/first.png" alt="">
				<span>{{item.name}}</span>
				<span>{{item.score}}</span>
			</p>
			<p v-for="item,key in daJsonArr" v-if="item.num == 2">
				<img src="imgs/second.png" alt="">
				<span>{{item.name}}</span>
				<span>{{item.score}}</span>
			</p>
			<p v-for="item,key in daJsonArr" v-if="item.num == 3">
				<img src="imgs/third.png" alt="">
				<span>{{item.name}}</span>
				<span>{{item.score}}</span>
			</p>
			<p v-for="item,key in daJsonArr" v-if="item.num > 3">
				<span>{{item.num}}</span>
				<span>{{item.name}}</span>
				<span>{{item.score}}</span>
			</p>
		</div>
		
		<script src="../../public/core/js/vue.js" type="text/javascript" charset="utf-8"></script>
		
		<script>
			
			var app = new Vue({
				el: '#app',
				data: {
					daJsonArr: [{
						score: 0,
						name: '张三'
					}, {
						score: 14,
						name: '李四'
					}, {
						score: 0,
						name: '王五'
					}, {
						score: 22,
						name: '张二'
					}, {
						score: 14,
						name: '李二'
					}, {
						score: 1,
						name: '王四'
					}, {
						score: 29,
						name: '李老大'
					}, {
						score: 22,
						name: '赵六'
					}, {
						score: 0,
						name: '铁柱'
					}, {
						score: 1,
						name: '赵四'
					}, {
						score: 29,
						name: '蛤蟆'
					}],
					newArr:[]
				},
				created: function() {
					this.sort()
					// console.log(JSON.stringify(this.daJsonArr))
					this.ranking()
				},
				methods: {
					sort(){
						this.daJsonArr.sort(function(a,b){
							return b.score-a.score
						})
					},
					ranking(){
						// 第一种
						this.daJsonArr.forEach((val,key) =>{
							if(key == 0){
								this.daJsonArr[0].num = 1
							}
							else if(this.daJsonArr[key].score == this.daJsonArr[key-1].score){
								this.daJsonArr[key].num = this.daJsonArr[key-1].num
							}else{
								this.daJsonArr[key].num = key + 1
							}
							// console.log(this.daJsonArr,111)
						});
						// // 第二种
						// this.daJsonArr.map((val,key) =>{
						// 	if(key == 0){
						// 		this.daJsonArr[0].num = 1
						// 	}
						// 	else if(this.daJsonArr[key].score == this.daJsonArr[key-1].score){
						// 		this.daJsonArr[key].num = this.daJsonArr[key-1].num
						// 	}else{
						// 		this.daJsonArr[key].num = this.daJsonArr[key].num + 1
						// 	}
						// 	// console.log(this.daJsonArr,222)
						// });
						// // 第三种
						// var JsonArr = this.daJsonArr;
						// for(var k in JsonArr){
						//   if(k==='0'){
						//     JsonArr[0].num = 1
						//   }else if(JsonArr[k].score===JsonArr[k-1].score){
						//     JsonArr[k].num = JsonArr[k-1].num
						//   }else{
						//     JsonArr[k].num = Number(k)+1
						//   }
						//   console.log(JsonArr)
						// }
					}
				}
			})
		</script>
	</body>

</html>
